<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>组件测试</title>
    <meta name="decorator" content="default"/>
    <style>
        #the-icons tr td span {
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#the-icons tr td span").mouseover(function () {
                $(this).css("background-color", "#3daae9");
                if ($(this).text().trim().match("icon-*")) {
                    $(this).find("i").addClass("icon-white");
                } else {
                    $(this).find("i").addClass("fa-white");
                }
            });
            $("#boundBtn").click(function(){
                $(top).unbind("userEvent");
                $(top).bind("userEvent",function(){
                    alert("userEvent");
                });
                $("#evalBtn").unbind("click");
                $("#evalBtn").bind("click",function(){
                    $(top).trigger("userEvent");
                })
            });


            $("#the-icons tr td span").mouseout(function () {
                $(this).css("background-color", "");
                $(this).removeClass("alert-info");
                $(this).find("i").removeClass("icon-white");
                $(this).find("i").removeClass("fa-white");
            });
            $("#btn_pro").popover({});
            $("#tip-ex a").tooltip({});
            $("#makecall").on("click", function () {
                var _phone_number = $("#phone-number").val();
                makeCall(_phone_number,{
                    customerId:$("#customer-id").val()
                },function(){
                    alert("哈哈触发了");
                });
            });
            $("#testProductType").click(function () {
                $.ajax({
                           url: "${ctx}/sys/assembly/testProductType",
                           type: "post",
                           data: {name: $("#productType").val()},
                           dataType: "json",
                           success: function (data) {
                               if (data.state == true) {
                                   showTip(data.message);
                               } else {
                                   alertx(data.message);
                               }
                           },
                           error: function (data, state, error) {
                               alertx(data.responseText, null, state + '请求错误');
                           }
                       });
            });
            $("#testCustomerFeature").click(function () {
                $.ajax({
                           url: "${ctx}/sys/assembly/testCustomerFeatureName",
                           type: "post",
                           data: {name: $("#customerFeature").val()},
                           dataType: "json",
                           success: function (data) {
                               if (data.state == true) {
                                   showTip(data.message);
                               } else {
                                   alertx(data.message);
                               }
                           },
                           error: function (data, state, error) {
                               alertx(data.responseText, null, state + '请求错误');
                           }
                       });
            });

            $("#testCustomerType").click(function () {
                $.ajax({
                           url: "${ctx}/sys/assembly/testCustomerType",
                           type: "post",
                           data: {name: $("#customerType").val()},
                           dataType: "json",
                           success: function (data) {
                               if (data.state == true) {
                                   showTip(data.message);
                               } else {
                                   alertx(data.message);
                               }
                           },
                           error: function (data, state, error) {
                               alertx(data.responseText, null, state + '请求错误');
                           }
                       });
            });
            $("#testRegion").click(function(){
                $.ajax({
                           url: "${ctx}/sys/assembly/testRegion",
                           type: "post",
                           data: {name: $("#region").val()},
                           dataType: "json",
                           success: function (data) {
                               if (data.state == true) {
                                   showTip(data.message);
                               } else {
                                   alertx(data.message);
                               }
                           },
                           error: function (data, state, error) {
                               alertx(data.responseText, null, state + '请求错误');
                           }
                       });
            });

            $("#idCustomerStatus").change(function(){
                var id = $(this).val();
                $("#customerStatusId").val($(this).val());
                $("#customerStatusOp").val($(this.options[this.selectedIndex]).attr("data-operation"));
                if(id){
                    $.getJSON("${ctx}/sys/customerStatus/selectDetail?type=select&id="+id,function(data){
                        if(data.state==true){
                            if(data.select.length>0){
                                $("#customerStatusDetail").html(data.select);
                                $("#customerStatusDetail").show();
                            }else{
                                $("#customerStatusDetail").hide();
                            }

                        }else{
                            alert(data.message);
                        }
                    });

                }
            });

            var sessionTester = null;

            $("#sessionBtn").click(function(){
                var offset = $(this).offset();
                var tip = $("#sessionLs");
                var init = tip.data("init");
                if(!init){
                    var left = offset.left - (tip.outerWidth()-$(this).outerWidth())/2;
                    var top = offset.top-$(this).outerHeight();
                    $("#sessionLs").offset({top:top,left:left});
                    tip.data("init","init");
                }
                $("#sessionLs").toggle();

                if($("#sessionLs").css("display")=="block"){
                    $("#sessionLs").find(".popover-title").text("开始监听");
                    var content = $("#sessionLs").find(".popover-content").text("开始监听");
                    $.post("${ctx}/sys/assembly/createSession",function(data){
                        if(!sessionTester){
                            sessionTester = setInterval(function(){
                                $.post("${ctx}/sys/assembly/testSession",function(data){
                                    content.text(JSON.stringify(data));
                                });
                            },1000);
                        }
                    });


                }else{
                    if(sessionTester){
                        clearInterval(sessionTester);
                        sessionTester = null;
                    }
                }
            });


        });

    </script>
</head>
<body>
<ul class="nav nav-tabs">
    <li><a href="#">组件测试</a></li>
</ul>
<br/>

<form:form method="post" class="form-horizontal">
    <div class="control-group">
        <label class="control-label">图标样式</label>

        <div class="controls">
            <a href="#iconModal" role="button" class="btn" data-toggle="modal">显示</a>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">自定义事件</label>

        <div class="controls">
            <button id="boundBtn" type="button">绑定</button>
            <button id="evalBtn" type="button">触发</button>
        </div>
    </div>

    <div class="control-group">
        <label class="control-label">treeTable</label>

        <div class="controls">
            <a href="${ctxStatic}/treeTable/demo/treeTable.html" class="btn">查看</a>
            <a target="_blank" href="${ctxStatic}/treeTable/demo/treeTable.html" class="btn">新窗口打开</a>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">summernote</label>

        <div class="controls">
            <a href="${ctxStatic}/summernote/demo/index.html" class="btn">查看</a>
            <a target="_blank" href="${ctxStatic}/summernote/demo/index.html" class="btn">新窗口打开</a>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">jbox</label>

        <div class="controls">
            <a href="${ctxStatic}/jquery-jbox/2.3/docs/bootstrap.html" class="btn">查看</a>
            <a target="_blank" href="${ctxStatic}/jquery-jbox/2.3/docs/bootstrap.html" class="btn">新窗口打开</a>
            <a href="javascript:alertx(111)" class="btn">alertx</a>
            <button type="button" class="btn btn-info"><i class="fa-folder-close-alt fa-white"></i></button>
            <button type="button" disabled="disabled" class="btn btn-info"><i class="icon-user icon-white"></i></button>
            <a id="btn_pro" data-placement="bottom" data-original-title="慎用" href="#" class="btn btn-danger"
               data-toggle="popover" title="" data-content="提示框弹出了 样式和上面的电话条不冲突 但是要是在页面定义那个样式层 就会变了">点击查看弹出提示</a>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">悬停工具</label>

        <div class="controls">
            <div id="tip-ex" class="bs-docs-example tooltip-demo">
                <p style="margin-bottom: 0;" class="muted">
                    测试一下文本<a title="" data-toggle="tooltip" href="#" data-original-title="Default tooltip">you
                    probably</a>
                    多个同时赋值<a title="Another tooltip" data-toggle="tooltip" href="#">have a</a>
                    到底有什么用处？<a title="A much longer tooltip belongs right here to demonstrate the max-width we apply."
                               data-toggle="tooltip" href="#">whatever keytar</a>
                    仅仅是检查样式是否冲突
                    <a title="The last tip!" data-toggle="tooltip" href="#">twitter handle</a>
                </p>
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">grid</label>

        <div class="controls">
            <a target="_blank" href="${ctxStatic}/bootstrap-table/example/index.html" class="btn">原始样式</a>
            <a target="_blank" href="${ctx}/sys/dict/listAjax" class="btn">使用数据字典模块测试</a>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">打电话</label>

        <div class="controls">
            电话号码:
            <input id="phone-number" value="15890160301"/>
            潜在客户ID:
            <input id="customer-id" value="IMPORT2015090117113652382"/>
            <button type="button" class="btn" id="makecall">拨打电话</button>
            <a class="btn" href="${ctx}/customer/potentialCall">本页打开</a>
            <a class="btn" target="_blank" href="${ctx}/customer/potentialCall">新窗口打开</a>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">产品类型</label>
        <div class="controls">
            <sys:productType id="idProductType" name="idProductType" withWu="true"
                             withAll="true" defaultValue="WLK"
                             cssClass="select-medium" status="OPEN"></sys:productType>
            <input type="text" id="productType"/>
            <button type="button" id="testProductType" class="btn">输入名称后点一下我</button>
            <br>
            JSTL直接使用=${fns:getProductType('WLK').productTypeName}:

        </div>
    </div>
    <div class="control-group">
        <label class="control-label">客户特点</label>

        <div class="controls">
            <sys:customerFeature id="idCustomerFeature" name="idCustomerFeature"
                                 withAll="true" defaultValue="4a2d89a64e2415a8014e241af5850020"
                                 cssClass="select2 select-medium"></sys:customerFeature>
            <input type="text" id="customerFeature"/>
            <button type="button" id="testCustomerFeature" class="btn">根据名称查询</button>
            <br>
            JSTL直接使用=${fns:getCustomerFeature("4a2d89a64e2415a8014e241af5850020").name}
        </div>
    </div>

    <div class="control-group">
        <label class="control-label">客户类型</label>

        <div class="controls">
            <sys:customerType id="idCustomerType" name="idCustomerType"
                              withAll="true" defaultValue="87d78aeb2c2e473fb71a8c1fdac2640d"
                              cssClass="select2 select-medium"></sys:customerType>
            <input type="text" id="customerType"/>
            <button type="button" id="testCustomerType" class="btn">根据名称查询</button>
            <br>
            JSTL直接使用=${fns:getCustomerType("87d78aeb2c2e473fb71a8c1fdac2640d").name}

        </div>
    </div>

    <div class="control-group">
        <label class="control-label">客户状态</label>
        <div class="controls">
            <input id="customerStatusId"/>
            <input id="customerStatusOp"/>
            <sys:customerStatus id="idCustomerStatus" name="defaultValue"
                              withAll="true" defaultValue=""
                              cssClass="select2 select-medium"/>
            <select id="customerStatusDetail" style="display: none"></select>

        </div>
    </div>

    <div class="control-group">
        <label class="control-label">区域</label>

        <div class="controls">
            <sys:region id="idRegion" name="idRegion"
                                 withAll="true" defaultValue=""
                                 cssClass="select2 select-medium"></sys:region>
            <input type="text" id="region"/>
            <button type="button" id="testRegion" class="btn">根据名称查询</button>
            <br>
            JSTL直接使用=${fns:getRegion('3687').regionName}
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">sessiong超时测试</label>

        <div class="controls">
            <button id="sessionBtn" class="btn btn-danger" type="button">监听</button>
            <div id="sessionLs" class="popover top">
                <div class="arrow"></div>
                <h3 class="popover-title">开始监听</h3>
                <div class="popover-content" style="height: 60px;">
                </div>
            </div>
        </div>
    </div>


</form:form>
<%@include file="icons.jsp" %>
</body>
</html>